<title>编辑管理员</title>
<script type="text/html" template lay-url="/admin/users/{{d.params.id}}" lay-done="layui.data.done(d);">
    <form class="layui-form" action="" method="post" lay-filter="LAY-system-admin-form-edit">

        <input type="hidden" name="id" value="{{d.result.id}}"/>

        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                {{d.result.username}}
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" id="LAY-system-admin-form-edit-password" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input" lay-verify="password">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" id="LAY-system-admin-form-edit-rePassword" name="pwd" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input"
                       lay-verify="password">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="请输入名称" autocomplete="off" class="layui-input"
                       lay-verify="required" maxlength="50" value="{{d.result.name}}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input"
                       lay-verify="required|email" value="{{d.result.email}}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input"
                       lay-verify="required|phone" value="{{d.result.phone}}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline" id="LAY-system-admin-edit-roles-box">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">设置</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="enabled" lay-skin="switch" lay-text="可用|禁用"
                       {{#
                        if(d.result.enabled){
                       }}
                        checked
                       {{#
                        }
                       }} value="true">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">锁定时间</label>
            <div class="layui-input-inline">
                <input type="text" id="LAY-system-admin-lock-date" readonly name="lockIn" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" value="{{d.result.lockIn || ''}}" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="LAY-system-admin-update">立即提交</button>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="LAY-system-admin-edit-roles-tpl">
    {{#
        layui.each(d.result, function(index, item){
    }}
        <input type="checkbox" class="role-box" title="{{ item.name }}" value="{{item.id}}"
        {{# for(var i in formData.roleIds) { if(formData.roleIds[i] === item.id) { }} checked {{# break; } } }}>
    {{#
        });
    }}
</script>

<script>
    layui.use(['admin', 'form'], function () {
        var $ = layui.$
            , admin = layui.admin
            , setter = layui.setter
            , layer = layui.layer
            , response = setter.response
            , form = layui.form



        //自定义验证规则
        form.verify({
            password: function (value) {
                if (value) {
                    var reg = /^[^\s&\"<>]+$/;
                    if (!reg.test(value)) {
                        return '密码必须是英文或者数字！';
                    }
                    if (value.length < 6) {
                        return '密码最少6个字符';
                    }
                    if (value.length > 20) {
                        return '密码最多20个字符';
                    }
                    var pass = $("#LAY-system-admin-form-edit-password").val();
                    if (value != pass) {
                        return '两次输入的密码不一致！';
                    }
                    var repass = $("#LAY-system-admin-form-edit-rePassword").val();
                    if (value != repass) {
                        return '两次输入的密码不一致！';
                    }
                }
            },
            email: function(value) {
                var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                if (!reg.test(value)) {
                    return '邮箱格式不正确';
                }

            },
            phone:function (value) {
                var reg = /^1[3|5|7|9|8]\d{9}$/
                if (!reg.test(value)) {
                    return '手机格式不正确';
                }
            }
        });

        form.on('submit(LAY-system-admin-update)', function (data) {
            var ids = [];
            $(data.form).find(".role-box:checked").each(function(){
                ids.push($(this).val())
            });
            data.field.roleIds = ids
            admin.req({
                url: '/admin/users/' + data.field.id,
                contentType:"application/json"
                , traditional: true
                , type: 'put'
                , data: JSON.stringify(data.field)
                , success: function (res) {
                    var statusCode = response.statusCode;
                    if (res[response.statusName] == statusCode.ok) {
                        layer.closeAll('page');
                        layer.msg('更新成功', {
                            icon: 1
                        });
                    }
                }
            });
            return false;
        });
    });

    var formData;
    layui.data.done = function (d) {
        layui.use(['form', 'laydate'], function () {
            var form = layui.form;

            formData = d.result;

            layui.admin.req({
                url: "/admin/options?role",
                dataType:"json",
                success:function(res) {
                    layui.laytpl(layui.$('#LAY-system-admin-edit-roles-tpl').html()).render(res, function(html){
                        layui.$("#LAY-system-admin-edit-roles-box").html(html);
                    });
                    layui.laydate.render({
                        elem: '#LAY-system-admin-lock-date',
                        type: 'datetime'
                    });
                    form.render(null, 'LAY-system-admin-form-edit'); //渲染该模板下的动态表单
                }
            })
        });
    };
</script>
